<template>
  <div class="serviceManage">
    <div class="detail">
      <div class="head"><span>参会人详情</span></div>
      <div class="info">
        <table class="tabletop">
          <tr>
            <td>会议号 :</td>
            <td>{{ cfCode }}</td>
            <td>会议名称 :</td>
            <td>{{ cfName }}</td>
          </tr>
          <tr>
            <td>会议开始时间 :</td>
            <td>{{ cfStartTime }}</td>
            <td>会议时长 :</td>
            <td>{{ duration }}</td>
          </tr>
        </table>
        <div class="line"></div>
      </div>
      <div class="content">
        <div class="checkall flex-end">
          <div class="export cp" @click="exportDocument(cfCode)">导出</div>
        </div>

        <table class="Datatable">
          <thead>
            <tr>
              <th>参会人</th>
              <th>入会时间</th>
              <th>退会时间</th>
              <th>入会时长</th>
              <th>身份</th>
            </tr>
          </thead>
          <tbody v-if="total > 0">
            <tr v-for="(item, index) in info" :key="index">
              <td>{{ item.userName }}</td>
              <td>{{ item.joinTime ?setLocalTime(item.joinTime):item.joinTime  }}</td>
              <td>{{ item.leaveTime?setLocalTime(item.leaveTime):item.leaveTime }}</td>
              <td>{{item.joinTime?setLocalTime(item.joinTime):item.joinTime}}</td>
              <td>{{ item.identity }}</td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="6">暂无数据</td>
            </tr>
          </tbody>
        </table>
        <div class="flex-end">
          <el-pagination
            v-if="total > 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="10"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import file from '@/utils/tools/fileExport'
import getUTCTime from '@/utils/tools/getUTCTime'
export default {
  data () {
    return {
      currentPage: 1,
      size: 10,
      checkboxList: [],
      checked: false,
      visible: false,
      total: 0,
      cfCode: '',
      cfStartTime: '',
      duration: '',
      cfName: ''
    }
  },
  created () {
    this.$store.dispatch('cfManage/getDetailData', { cfId: this.id }).then((res) => {
      // // console.log(res.data)
      this.cfCode = res.data.cfCode
      this.cfName = res.data.cfName
      this.cfStartTime = res.data.cfStartTime
      this.duration = res.data.duration
      this.$store
        .dispatch('cfManage/getParticipantsData', {
          cfId: this.id,
          page: this.currentPage - 1,
          size: this.size
        })
        .then((res) => {
        // // console.log(res.data.size)
          this.total = res.data.size
        }).catch(err => {
          this.$message({
            type: 'error',
            message: err,
            duration: 1000
          })
        })
    })
  },
  computed: {
    info () {
      return this.$store.state.cfManage.tableData
    },
    id () {
      return Number(sessionStorage.getItem('cfid'))
    }
  },
  methods: {
    setLocalTime (time) {
      return this.$moment(+new Date(time)).format('YYYY-MM-DD HH:mm:ss')
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.$store.dispatch('cfManage/getParticipantsData', {
        cfId: this.id,
        page: this.currentPage - 1,
        size: this.size
      })
    },
    handleSizeChange (size) {
      this.size = size
      this.$store.dispatch('cfManage/getParticipantsData', {
        cfId: this.id,
        page: this.currentPage - 1,
        size: this.size
      })
    },
    exportDocument (cfCode) {
      const timeZone = -getUTCTime.getUTCTime(new Date())
      this.$store.dispatch('cfManage/exportDocumentData', { cfIds: this.id, timeZone }).then(res => {
        file.fileExport(res.data, cfCode)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.serviceManage {
  .detail {
    min-height: 932px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 8px;
    // margin-top: 24px;
    padding: 0 24px;
  }
  .head {
    width: 100%;
    height: 78px;
    border-bottom: 1px solid #e6e9f0;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    color: #1b1f35;
    span {
      position: absolute;
      bottom: 20px;
    }
  }
  .info {
    padding-top: 37px;

    .tabletop {
      margin-left: 20px;
    }
    tr {
      color: #3d4966;
      vertical-align: top;
      td:nth-child(1) {
        width: 104px;
        height: 50px;
        color: #1b1f35;
        text-align: right;
      }
      td:nth-child(2) {
        padding-left: 20px;
        width: 243px;
      }
      td:nth-child(3) {
        width: 76px;
        text-align: right;
      }
      td:nth-child(4) {
        // width: 1161px;
        padding-left: 20px;
      }
    }
  }
  .content {
    width: 100%;
    // min-height: 674px;
    // padding: 0 24px;
    background-color: #fff;
    padding-top: 1px;
    // margin-top: 20px;
    // margin-left: -20px;
    border-radius: 8px;
    position: relative;
    // padding-bottom: 172px;
    .el-pagination {
      right: 0px;
    }

    table {
      // width: 100%;
      // border-collapse: collapse;
      // table-layout: fixed;

      th,
      td {
        // border: 1px solid #e6e9f0;
        // text-align: center;
        // height: 60px;
        // line-height: 60px;
        // color: #3d4966;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;

        &:nth-child(1) {
          width: 160px;
        }
        &:nth-child(2) {
          width: 374px;
        }
        &:nth-child(3) {
          width: 332px;
        }
        &:nth-child(4) {
          width: 330px;
        }
      }

      // thead {
      //   tr {
      //     background-color: #f7f9fc;

      //     color: #1f2e4d;
      //   }
      // }

      // tbody {
      //   tr:hover {
      //     background-color: #f7f9fc;
      //   }
      // }
    }
  }
}
</style>
